<template>
    <template v-for="item in ViewConfig">
        <div class="Title">{{ item.title }}</div>
        <template v-for="child in item.children" :key="child.Key">
            <ObjectItem :Option="child" />
        </template>
    </template>
</template>
<script setup>
import { StringToRule, GetChangeValueEvents, GetParamsMapping, GetChangeOptionEvents } from '../CustomForm/Util'
import { ref, watch } from 'vue'
import ObjectItem from './child.vue'

const props = defineProps(['Model']);
console.log(props.Model);

const ViewConfig = ref([]);
// ViewConfig.value = GetDefaultFormView(props.Model.Param, props.Model.View.Form.Default)

const ChangeEvents = GetChangeValueEvents(props.Model.Param);
const OptionChangeEvents = GetChangeOptionEvents(props.Model.Param);
const ParamsMapping = ref(GetParamsMapping(props.Model.Param));


const GetDefaultFormView = (ParamsMapping, FormConfig) => {
    const Mapping = ParamsMapping;
    if (!FormConfig) return [];
    var View = [];
    for (let i = 0; i < FormConfig.length; i++) {
        const element = FormConfig[i];
        const FormItem = {
            title: element.title,
            labelCol: 150,
            children: [],
        }
        for (let d = 0; d < element.children.length; d++) {
            const item = element.children[d];
            Mapping[item] && FormItem.children.push(Mapping[item]);
        };
        View.push(FormItem);
    }
    return View;
}


ViewConfig.value = GetDefaultFormView(ParamsMapping.value, props.Model.View.Form.Default)

watch(ViewConfig, (val) => {
    console.log(val);
}, { deep: true })


setTimeout(() => {
    ParamsMapping.value.name.Label = 'ASd';
    console.log('asd');
}, 1000)




</script>
<style lang="less" scoped></style>